<template>
  <el-dialog title="添加成员" :visible.sync="showAdd" width="400px"
             @close="$emit('update:showAddMember', false)" :close-on-click-modal="false" @before-close="handleClose">
    <el-form label-position="right" ref="addInfo" :rules="rules" :model="addInfo" label-width="90px">
      <el-form-item label="成员账号:" prop="telphone">
        <el-input v-model="addInfo.telphone"></el-input>
      </el-form-item>
      <el-form-item label="成员姓名:" prop="userName">
        <el-input v-model="addInfo.userName"></el-input>
      </el-form-item>
      <el-form-item label="邮箱地址:" prop="mailbox">
        <el-input v-model="addInfo.mailbox"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="closeModel">取 消</el-button>
        <el-button type="primary" @click="AddDepartment('addInfo')">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
  export default {
    name: "AddMember",
    props: {
      showAddMember: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        showAdd: this.showAddMember,
        addInfo: {
          telphone: "",
          userName: "",
          mailbox: ""
        },
        rules: {
          telphone: [
            {required: true, message: '请输入成员账号', trigger: 'blur'},
            {validator: validate.phone, trigger: ['blur', 'change']}
          ],
          userName: [
            {required: true, message: '请输入成员姓名', trigger: 'blur'}
          ],
          mailbox: [
            {required: true, message: '请输入邮箱地址', trigger: 'blur'},
            {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
          ]
        }
      }
    },
    watch: {
      showAddMember() {
        this.showAdd = this.showAddMember
      }
    },
    methods: {
      handleClose(done) {
        this.resetForm()
        done()
      },
      closeModel() {
        this.resetForm()
        this.showAdd = false
      },
      resetForm() {
        this.$refs['addInfo'].resetFields();
      },
      AddDepartment(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            ajax.post(apis.auth.addMember, this.addInfo)
              .then(res => {
                if (res.success === true) {
                  this.$message({
                    message: "添加成功",
                    type: 'success'
                  });
                  this.showAdd = false
                  this.$emit("refreshList")
                  this.addInfo = {
                    telphone: "",
                    userName: "",
                    mailbox: ""
                  }
                } else {
                  this.$message({
                    message: res.message,
                    type: 'error'
                  })
                }
              })
          }
          else {
            return false;
          }
        });
      }
    },
    created() {
    }
  }
</script>

<style lang="scss" scoped>
  .i-plus {
    text-align: center;
  }
</style>
